<template>
  <div class="app-container">
    <el-form
      :model="tableData.queryParams"
      ref="queryForm"
      :inline="true"
      label-width="100x"
    >
      <el-form-item label="排班月份" prop="planMonth">
        <el-date-picker
          type="month"
          v-model="tableData.queryParams.planMonth"
          value-format="yyyy-MM"
          placeholder="请选择排班月份"
          clearable
          size="small"
        />
      </el-form-item>

      <el-form-item label="姓名" label-width="80px" prop="personName">
        <el-input
          v-model="tableData.queryParams.personName"
          clearable
          size="small"
          placeholder="请输姓名"
        />
      </el-form-item>
      <el-form-item label="考勤组" label-width="80px" prop="groupName">
        <hd-search-input
          v-model="tableData.queryParams.groupName"
          keyName="groupName"
          modulePath="attendance/group"
          :initParams="{ groupType: 2 }"
          @change="selectgroupName"
        ></hd-search-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getList"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="24" style="text-align: right">
        <el-button
          type="primary"
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport()"
          v-hasPermi="['attendance:schedule:import']"
        >
          excel导入排班表
        </el-button>
        <el-button
          type="success"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['attendance:schedule:export']"
        >
          导出排班表
        </el-button>
      </el-col>
    </el-row>
    <ux-grid
      :pagination-show="true"
      :total="tableData.total"
      :page-size.sync="tableData.queryParams.pageSize"
      :current-page.sync="tableData.queryParams.pageNum"
      @handlePageSize="handlePageSize"
      :default-expand-all="true"
      ref="plxTableProcess"
      show-body-overflow="title"
      show-header-overflow="title"
      :height="tableH"
      widthResize
      border
      :data="tableData.rows"
      :header-cell-style="{ 'text-align': 'center' }"
    >
      <!-- <ux-table-column title="#" align="center" type="index" width="40"></ux-table-column> -->
      <ux-table-column
        title="姓名"
        align="center"
        field="personName"
        width="160px"
        fixed="left"
      ></ux-table-column>
      <ux-table-column
        title="部门"
        align="center"
        field="deptId"
        width="160px"
        fixed="left"
      >
        <template v-slot="scope">
          <dict-tag :options="deptList" :value="scope.row.deptId" />
        </template>
      </ux-table-column>
      <ux-table-column
        v-for="i in $moment(tableData.queryParams.planMonth).daysInMonth()"
        :key="i"
        :title="i + '日'"
        align="center"
        :field="'planNumber' + i"
        width="90px"
      >
        <template v-slot="{ row }">
          <span>
            {{ row[`planNumber${i}`] }}
          </span>
        </template>
      </ux-table-column>
    </ux-grid>
    <el-dialog
      :title="upload.title"
      v-model="upload.open"
      :close-on-click-modal="false"
      width="500px"
      draggable
      append-to-body
    >
      <el-form
        ref="uploadForm"
        :model="upload.form"
        :rules="upload.rules"
        label-width="80px"
      >
        <el-form-item label="月份" prop="planMonth" v-if="flag == 2">
          <el-date-picker
            type="month"
            v-model="upload.data.planMonth"
            value-format="yyyy-MM"
            placeholder="请选择计划月份"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="导入文件" prop="planMonth">
          <el-upload
            ref="upload"
            :limit="1"
            accept=".xlsx, .xls"
            :headers="upload.headers"
            :action="upload.url"
            :disabled="upload.isUploading"
            :data="upload.data"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false"
            drag
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或
              <em>点击上传</em>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upload.open = false">取 消</el-button>
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PlanService from "@/api/produce/customer";
import { getToken } from "@/utils/auth";
import { getDeptList } from "@/api/system/dept";

export default {
  name: "ShiftMonth",
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      // 工单表格数据
      moeDetList: [],
      tableH: document.body.clientHeight - 230,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      readOnly: false,
      //移动工单弹出层
      mobileOpen: false,
      tableData: {
        height: 0,
        rows: [],
        loading: false,
        total: 0,
        open: false,
        form: {},
        selection: [],
        rules: {},
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          planMonth: this.$moment().format("YYYY-MM"),
          groupName: "轮班",
          groupId: "18",
          personName: null,
        },
      },
      tableDataBom: {
        height: 0,
        rows: [],
        loading: false,
        total: 0,
        open: false,
        form: {},
        selection: [],
        rules: {},
        queryParams: {
          pageNum: 1,
          pageSize: 20,
        },
      },
      params: {},
      upload: {
        data: {
          planMonth: this.$moment().format("YYYY-MM"),
          groupId: "18",
        },
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: "",
      },
      flag: null,
      // 表单参数
      form: {},
      editRender: { autofocus: ".el-input__inner" },
      deptList: [],
    };
  },
  created() {
    this.getList();
    getDeptList().then((res) => {
      this.deptList = res.data;
      for (let item of this.deptList) {
        item.dictLabel = item.deptName;
        item.listClass = "default";
        item.dictValue = item.deptId + "";
      }
    });
  },
  methods: {
    /** 查询工单列表 */
    getList() {
      this.loading = true;
      this.tableData.queryParams.pageNum = 1;
      PlanService.scheduleList(this.tableData.queryParams).then((response) => {
        this.tableData.rows = response.rows;
        this.tableData.total = response.total;
        this.tableData.loading = false;
      });
    },
    save(row) {
      PlanService.save(row);
    },
    handleImport() {
      this.upload.title = "导入排版表";
      this.upload.url =
        process.env.VUE_APP_BASE_API + "/attendance/schedule/import";
      this.upload.open = true;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      if (response.data) {
        this.download(response.data.msg);
      }
      this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
      this.$refs.upload.clearFiles();
      this.getList();
    },
    submitFileForm() {
      this.$refs.upload.submit();
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.tableData.queryParams;
      this.$confirm("是否确认导出所有数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.exportLoading = true;
          return PlanService.scheduleExportTemplate(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
          this.exportLoading = false;
        })
        .catch(() => {});
    },
    handlePageSize(params) {
      this.tableData.queryParams.pageNum = params.page;
      this.tableData.queryParams.pageSize = params.size;
      this.tableData.queryParams.queryStr = this.queryStr;
      PlanService.monthPlanlist(this.tableData.queryParams).then((response) => {
        this.tableData.rows = response.rows;
        this.tableData.total = response.total;
        this.tableData.loading = false;
        this.tableData.form = {};
      });
    },
    selectgroupName(params) {
      this.tableData.queryParams.groupId = params.id;
      this.upload.data.groupId = params.id;
    },
  },
};
</script>

<style lang="scss" scoped>
.progress-dialog {
  margin-top: 20vh !important;
}
</style>
